<template>
  <div class="home-container">
    <div class="banner">
      <h1 class="banner-title">3D</h1>
    </div>
    <div>
      <el-card class="cardbg">
        <div class="carditems">
          <router-link :to="'/threeone'">
            <el-card class="threeitem1"></el-card>
          </router-link>

          <router-link :to="'/threetwo'">
            <el-card class="threeitem2"></el-card>
          </router-link>
          <router-link :to="'/threethree'">
            <el-card class="threeitem3"></el-card>
          </router-link>

          <router-link :to="'/threefor'">
            <el-card class="threeitem4"></el-card>
          </router-link>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Three",
  data() {
    return {};
  },
};
</script>

<style scoped>
.carditems {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px 12px;
}
.threeitem1 {
  height: 180px;
  width: 160px;
  display: flex;
  align-items: center;
  margin: 0 40px;
  background: url("http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E6%A8%A1%E5%9E%8B/%E6%9E%AA.jpg")
    center center / cover no-repeat;
}

.threeitem2 {
  height: 180px;
  width: 160px;
  display: flex;
  align-items: center;
  margin: 0 40px;
  background: url("http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E6%A8%A1%E5%9E%8B/%E8%A1%80%E5%8E%8B%E8%AE%A1%E5%89%8D.jpg")
    center center / cover no-repeat;
}

.threeitem3 {
  height: 180px;
  width: 160px;
  display: flex;
  align-items: center;
  margin: 0 40px;
  background: url("http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E6%A8%A1%E5%9E%8B/car.png")
    center center / cover no-repeat;
}
.threeitem4 {
  height: 180px;
  width: 160px;
  display: flex;
  align-items: center;
  margin: 0 40px;
  background: url("http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E6%A8%A1%E5%9E%8B/%E5%B0%8F%E5%B1%8B%E5%AD%90.jpg")
    center center / cover no-repeat;
}
.cardbg {
  /* background-color: #eee; */
  opacity: 0.8;
  height: 100%;
  /* display: flex;
  flex-direction: column; */
  position: relative;
  animation: main 1s;
  max-width: 951px;
  padding: 24px 40px;
  margin: 26px auto 17px auto;
  /* overflow: scroll; */
}

blockquote {
  line-height: 2;
  margin: 0;
  font-size: 15px;
  border-left: 0.2rem solid #49b1f5;
  padding: 10px 1rem !important;
  background-color: #ecf7fe;
  border-radius: 4px;
}
.link-title {
  color: #344c67;
  font-size: 21px;
  font-weight: bold;
  line-height: 2;
}

.banner {
  /* position: absolute; */
  background-color: #49b1f5 !important;
  top: -60px;
  left: 0;
  right: 0;
  height: 320px;
  animation: header-effect 1s;
  opacity: 0.8;
  background: url("http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E7%B2%BE%E5%9B%BE/10.jpg")
    center center / cover no-repeat;
}
.banner-title {
  animation: title-scale 1s;
  position: absolute;
  top: 11.5rem;
  padding: 0 0.5rem;
  width: 100%;
  font-size: 2.5rem;
  text-align: center;
  color: #eee;
}
.carimg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
  /* opacity: 0.8; */
  /* position: fixed; */
  z-index: -9;

  /* top: -60px; */
}
.home-container {
  z-index: -9;
  /* height: 100%; */
  width: 100%;
  overflow: auto;
  /* overflow-y: scroll; */
  /* position: absolute; */
}
</style>
